<div class="footer__wrap">
  <div nz-row>
    <div nz-col nzXs="24" nzSm="24" nzLg="6">
      <div class="footer__center">
        <h2>ng-alain</h2>
        <div><a href="https://github.com/ng-alain/ng-alain" target="_blank">Github</a></div>
        <div><a href="https://github.com/ng-alain/delon" target="_blank">@delon</a></div>
        <div><a href="https://github.com/ng-alain/ng-zorro-vscode" target="_blank">ng-zorro-vscode</a></div>
        <div><a href="https://github.com/ng-alain/ng-alain-vscode" target="_blank">ng-alain-vscode</a></div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzLg="6">
      <div class="footer__center">
        <h2>{{ 'app.footer.resources' | translate }}</h2>
        <div>
          <a href="https://www.angular.cn/" target="_blank">Angular</a>
          <span> - </span>
          {{ 'app.footer.angular' | translate }}
        </div>
        <div>
          <a href="https://ng.ant.design" target="_blank">ng-zorro-antd</a>
          <span> - </span>
          {{ 'app.footer.antd' | translate }}
        </div>
        <div>
          <a href="https://cli.angular.io/" target="_blank">CLI</a>
          <span> - </span>
          {{ 'app.footer.cli' | translate }}
        </div>
        <div>
          <a href="https://antv.alipay.com/" target="_blank">AntV</a>
          <span> - </span>
          {{ 'app.footer.antv' | translate }}
        </div>
        <div>
          <a href="https://ng-alain.gitee.io/delon/" target="_blank">文档国内镜像</a>
        </div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzLg="6">
      <div class="footer__center">
        <h2>{{ 'app.footer.community' | translate }}</h2>
        <div>
          <a routerLink="/docs/changelog/{{ i18n.zone }}">{{ 'app.footer.change-log' | translate }}</a>
        </div>
        <div>
          <a routerLink="/docs/faq/{{ i18n.zone }}">{{ 'app.footer.faq' | translate }}</a>
        </div>
        <div>
          <a href="https://github.com/ng-alain/ng-alain/issues" target="_blank">{{ 'app.footer.issues' | translate }}</a>
        </div>
        <div>
          <a href="https://ng-alain.com/issue-helper/#{{ i18n.zone }}" target="_blank">{{ 'app.footer.issue-help' | translate }}</a>
        </div>
        <div>
          <a (click)="onCopy('316911865')">{{ 'app.footer.qqgroup' | translate }} 1: 316911865</a>
        </div>
        <div>
          <a (click)="onCopy('428749721')">{{ 'app.footer.qqgroup' | translate }} 2: 428749721</a>
        </div>
      </div>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzLg="6">
      <div class="footer__center">
        Copyright &copy; 2020 <a href="https://github.com/cipchk" target="_blank">&copy;卡色</a>
        <p class="mt-sm">
          <a href="http://www.beian.miit.gov.cn" target="_blank" class="text-grey">闽ICP备18008195号</a>
        </p>
        <div class="mt-lg">
          <div class="theme-color" nz-popover [nzPopoverContent]="colorTpl" nzPopoverTrigger="click" nzPopoverOverlayClassName="theme-color-content">
            <div class="theme-color-value" [ngStyle]="{ background: color }"></div>
          </div>
          <ng-template #colorTpl>
            <color-sketch [color]="color" (onChangeComplete)="changeColor($event)"></color-sketch>
          </ng-template>
        </div>
      </div>
    </div>
  </div>
</div>
